<!--
 * @Author: your name
 * @Date: 2021-10-07 16:48:11
 * @LastEditTime: 2021-10-17 10:32:26
 * @LastEditors: Please set LastEditors
 * @Description: 电影排行榜页面
 * @FilePath: \film-project\src\views\RankingList.vue
-->
<template>
  <div class="content">
    <div id="title">
      <h1>电影排行榜</h1>
    </div>
    <div class="left">
      <div class="name">电影新片榜 · · · · · ·</div>
      <div class="projects">
        <div class="project" v-for="item in movies" :key="item.id">
          <div class="picture">
            <img :src="item.cover" alt="图片丢失" width="85px" />
          </div>
          <div class="descript">
            <div class="othername">
              <span>{{ item.title }}</span>
            </div>
            <div class="message" v-html="item.content"></div>
            <div class="score">
              <el-rate
                v-model="value"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              >
              </el-rate>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="ranking_list">
        <div class="name">分类排行榜 · · · · · ·</div>
        <div
          class="classify"
          v-for="item in classify"
          :key="item.id"
          v-on:click="onCalssify(item.id)"
        >
          <li>{{ item.name }}</li>
        </div>
      </div>
      <div class="mouth_list">
        <div class="name">一周口碑榜 · · · · · ·</div>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "../utils/request";
import request from "../utils/request";
export default {
  data() {
    return {
      value: 3.5,
      movies: [], //电影信息
      classify: [], //分类排行榜
      page: 1,
      pageSize: 10,
    };
  },
  methods: {
    //获取电影信息
    findAllMovies() {
      request
        .get(
          "/index/article/pageQuery?page=" +
            this.page +
            "&pageSize=" +
            this.pageSize
        )
        .then((res) => {
          //get()是请求get接口  请求路径  字符串拼接?传递参数
          if (res && res.status == 200 && res.data) {
            //判断请求存在
            this.movies = res.data.list; //将后台请求回来的游学项目列表赋值给projects  回调函数
          } else {
            this.movies = [];
          }
        });
    },
    //获取分类
    findAllClassify() {
      get("/index/category/findAll").then((res) => {
        this.classify = res.data;
      });
    },
    onCalssify(id) {
      //实现点击分类排行榜之后页面跳转
      this.$router.push({
        path: "/project",
        query: {
          id,
        },
      });
    },
  },
  created() {
    this.findAllMovies(); //调用查看电影方法
    this.findAllClassify(); //调用查询分类的方法
  },
};
</script>
<style scoped>
.content {
  width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}
.content .left,
.content .right {
  float: left;
  color: #007722;
  font-size: 18px;
}
.content .left {
  width: 70%;
}
.content .right {
  width: 30%;
}
.content .left .project {
  border-top: 2px dotted #dddddd;
  margin-top: 10px;
  width: 90%;
  padding: 20px 10px 10px;
  font-size: 14px;
}
.content .left .project .picture img {
  vertical-align: top;
}
.content .left .project .picture {
  float: left;
}
.content .left .project .descript {
  float: left;
  width: 80%;
  margin-left: 20px;
}
.content .left .project .descript .othername span {
  color: #666699;
}
.content .left .project .descript .othername span:hover {
  color: white;
  background-color: #3377aa;
}
.content .left .project .descript .message {
  margin-top: 18px;
  color: #666666;
  height: 80px;
  overflow: hidden;
}
.content .left .project .descript .score {
  margin-top: 18px;
}
.content .left .project::after {
  content: "";
  display: block;
  clear: both;
}
.content .right .classify {
  background-color: pink;
  /* display: flex;
  flex-wrap: wrap; */
}
.content .right .classify li {
  float: left;
  list-style: none;
  color: #4d77bf;
  font-size: 15px;
  box-sizing: border-box;
  margin-right: 20px;
  margin-top: 14px;
  border-radius: 2px;
}

.content .right .classify li:hover {
  color: white;
  background-color: #3377aa;
}
.content .right .ranking_list {
}
.content .right .mouth_list {
  clear: both;
  margin-top: 120px;
}
</style>
